<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>直播时段</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link href="/node_modules/LobsterUIFrame/layuiadmin/layui/css/layui.css" rel="stylesheet" />
	<link href="/node_modules/LobsterUIFrame/layuiadmin/style/admin.css" rel="stylesheet" />
	<link href="/node_modules/LobsterUIFrame/layuiadmin/layui/css/modules/layui-icon-extend/iconfont.css"
		rel="stylesheet" />
	<script src="/node_modules/LobsterUIFrame/layuiadmin/layui/layui.js"></script>
	<style>
		.layui-input,
		.layui-select {
			height: 34px;
		}

		.layui-form-item {
			margin-bottom: 10px;
		}

		.layui-form-label {
			color: #000;
			width: 126px;
			padding: 7px 15px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.layui-input-block {
			margin-left: 156px;
		}
	</style>
</head>

<body>
	<div class="layui-fluid box">
		<form class="layui-form" lay-filter="formdata" id="formdata" name="formdata">
			<div class="layui-card">
				<div class="layui-card-body">

					<div class="layui-row">
						<div class="layui-col-xs12">
							<div class="layui-form-item" id="amdiv">
								<label class="layui-form-label">直播时段</label>
								<div class="timeCount  layui-input-block">
									<div class="layui-input-inline" style="width:140px;">
										<input type="text" required lay-verify="checkamstart"
											class="withdrawTime layui-input dateStartAm" id="dateStartAm"
											name="dateStartAm" value="00:00:00" />
									</div>
									<div class="layui-input-inline" style="width:4px;">
										<label>-</label>
									</div>
									<div class="selecttime layui-input-inline" style="width:140px;">
										<input type="text" required lay-verify="checkamend"
											class="withdrawTime layui-input dateEndAm" id="dateEndAm" name="dateEndAm"
											value="00:00:00" />
									</div>
									<a style="background-color:white;border:none" class="btnadd">
										<i class="layui-icon layui-icon-add-circle"
											style="font-size: 26px;cursor: pointer;line-height: 36px;"></i>
									</a>
									<a style="background-color:white;border:none;display:none;" class="btndelete">
										<i class="layui-icon layui-icon-delete"
											style="font-size: 28px;cursor: pointer;line-height: 36px;"></i>
									</a>
								</div>
								<div id="timeAm"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-form-item layui-hide">
				<input type="button" lay-submit lay-filter="LAY-app-front-submit" id="LAY-app-front-submit" value="保存">
				<input type="button" lay-cancel lay-filter="LAY-app-front-cancel" id="LAY-app-front-cancel" value="取消">
				<input type="reset" id="LAY-app-form-reset" value="重置">
			</div>

			<div class="layui-form-item layui-hide">
				<input type="text" id="RoomId" name="RoomId" value="0" />
			</div>
		</form>
	</div>
</body>

</html>

<script>
	layui.config({
		base: '/node_modules/LobsterUIFrame/layuiadmin/' //静态资源所在路径
	}).extend({
		index: 'lib/index' //主入口模块
	});

	layui.define(['index', 'layer', 'form', 'element', 'table', 'tree', 'laydate'], function () {
		var layer = layui.layer;
		var form = layui.form;
		var element = layui.element;
		var table = layui.table;
		var $ = layui.$;
		var admin = layui.admin;
		var setter = layui.setter;
		var tree = layui.tree;
		var laydate = layui.laydate


		var controller = {
			data: {
				layerindex: 0,
				model: {},
				fun: null
			},
			//初始化页面
			initpage: function () {
				var self = this
				console.log(parent.mod)
				self.data.mod = parent.mod
				this.initevent(function () {
					self.getRoomTimes()
				});

				// laydate.render({
				// 	elem: '#time1'
				// 	, type: 'time'
				// 	,format:'HH:mm'
				// });
				// laydate.render({
				// 	elem: '#time2'
				// 	, type: 'time'
				// 	,format:'HH:mm'
				// });
			},
			getbaseurl: function (fun) {
				var url = "/lowcode/APP20210908194005415/live/?view=layui&fun=" + fun;
				return url;
			},
			//初始化事件
			initevent: function (func) {
				var self = this;
				var url = this.getbaseurl("LiveCourse.getbaseinfo");
				admin.req({
					url: url,  //控制器名称，方法名称
					data: {},
					done: function (res) {
						self.data.baseinfo = res.data;
						if (func) {
							func();
						}
					}
				});

				///添加时间段
				$(document).on("click", ".btnadd", function (obj) {
					var target = $(obj.currentTarget);
					console.log("被点击了！");
					console.log(obj.currentTarget);
					var div = target.parent().clone();
					div.find(".dateStartAm").val("00:00:00");
					div.find(".dateEndAm").val("00:00:00");
					div.find(".btndelete").show();
					div.insertAfter(target.parent());
					self.timeRender();
				});

				///删除时间段
				$(document).on("click", ".btndelete", function (obj) {
					var target = $(obj.currentTarget);
					target.parent().remove();

				});

				parent.getResult = function (fun) {
					self.data.fun = fun;
					var roomTimeslist = new Array();
					$(".timeCount").each(function (i, d) {
						var startTimea = $(this).find(".dateStartAm").val();
						var endTimea = $(this).find(".dateEndAm").val();
						console.log("上午结束时间！");
						console.log(endTimea);
						if (startTimea != "00:00:00" || endTimea != "00:00:00") {
							roomTimeslist.push({
								ScheduleDetailId: 0,
								ScheduleId: 0,
								RoomId: parent.mod.roomid,
								StartTime: startTimea,
								EndTime: endTimea,
								EmpId: parent.mod.empid,
								EmpName: parent.mod.DocName,
								Status: 0,
								DelFlag: 0,
							});
							console.log("上午时间:");
							console.log(roomTimeslist);
						}
					});
					if (roomTimeslist.length <= 0) {
						layer.msg('未选择排班时间段!无法保存。');
						return null;
					}
					console.log("上午时间！");
					console.log(roomTimeslist);
					var result = self.checkingList(roomTimeslist);
					if (result) {
						self.data.fun(roomTimeslist);
					} else {
						self.data.fun(null);
					}
				};
			},
			getRoomTimes: function () {
				var self = this
				console.log("诊室ID是：");
				console.log(parent.mod.roomid);
				var url = this.getbaseurl("LiveCourse.getscheduledetail");
				//首行赋初值
				$("#dateStartAm").val("00:00:00");
				$("#dateEndAm").val("00:00:00");
				if (parent.mod.roomid > 0) {
					admin.req({
						type: 'get',
						url: url,
						data: {
							RoomId: parent.mod.roomid,
							scheduleid: parent.mod.scheduleid
						},
						done: function (res) {
							var dateList = res.data.RoomTimes;
							if (dateList != null && dateList.length > 0) {
								for (var i = 0; i < dateList.length; i++) {
									//上午
									if (i == 0) {
										//第一条 直接赋值
										$("#dateStartAm").val(dateList[i].StartTime + ':00');
										$("#dateEndAm").val(dateList[i].EndTime + ':00');
									}
									else {
										//添加行 加数据
										var div = $("#amdiv .timeCount:eq(0)").clone();
										div.find(".dateStartAm").val(dateList[i].StartTime + ':00');
										div.find(".dateEndAm").val(dateList[i].EndTime + ':00');
										div.find(".btndelete").show();
										div.appendTo("#amdiv")
									}
								}
							}
							self.timeRender();
							form.render(); //更新全部
						}
					});
				}
				else {
					self.timeRender();
					form.render();
				}
			},
			//渲染时间控件
			timeRender: function () {
				lay('.timeCount .withdrawTime').each(function () {
					laydate.render({
						elem: this
						, type: 'time'
						, trigger: 'click'
					});
				});
				//在每次动态生成laydate组件时, laydate框架会给input输入框增加一个lay-key="1",
				//这样就导致了多个laydate 的inpute框都有lay-key="1"这个属性。导致时间控件不起作用，
				//需要把动态生成的lay-key属性删除
				$(".withdrawTime").removeAttr("lay-key");
			},

			//验证方法
			checkingList: function (list) {

				for (var i = 0; i < list.length; i++) {

					if (list[i].StartTime == null || list[i].StartTime == "") {
						layer.msg('开始时间不能为空!'); return false;
					}
					if (list[i].EndTime == null || list[i].EndTime == "") {
						layer.msg('结束时间不能为空!'); return false;
					}

					//开始结束时间验证
					if (list[i].StartTime >= list[i].EndTime) {
						layer.msg("开始时间大于结束时间，无法保存！")  //list[i].startTime + "~" + list[i].endTime+
						return false;
					}
					//交叉验证
					for (var j = 0; j < list.length; j++) {
						if (j == i) continue;

						if ((list[i].StartTime <= list[j].StartTime) && (list[i].EndTime >= list[j].EndTime)) {
							layer.msg('排班时间段不允许有交叉!');
							return false;
						}
						if (list[i].StartTime > list[j].StartTime && list[i].StartTime < list[j].EndTime) {
							layer.msg('排班时间段不允许有交叉!');
							return false;
						}

						if (list[i].EndTime > list[j].StartTime && list[i].EndTime < list[j].EndTime) {
							layer.msg('排班时间段不允许有交叉!');
							return false;
						}
					}

				}

				return true;

			},


		}

		/*
		* 入口
		*/
		controller.initpage();
	});

</script>